<template>
  <div class="account">
        <div id="b">
    <div class="shop">
        <router-link to="/shop" class="s1">
          <div id="icon" class="iconfont icon-gouwuche"></div>
              <div class="shopp" >购物车
                <span>></span>
              </div>
        </router-link>
        <div class="s1">
          <div id="icon" class="iconfont icon-gouwuche"></div>
              <div class="shopp1">积分抽奖
                <span class="good">好奖随心选</span>
                 <span>></span>
              </div>
        </div>
    </div>
    <div id="my">
      <div class="my-order">
        <div id="font" class="iconfont icon-dingdan"></div>
        <div class="order">我的订单
          <span>></span>
        </div>
      </div>
      <div class="my-order">
        <div id="font" class="iconfont icon-tongqian"></div>
        <div class="order">我的余额
          <span class="time">限时充值优惠</span>
          <span>></span>
        </div>
      </div>
      <div class="my-order">
        <div id="font" class="iconfont icon-huhuan"></div>
        <div class="order">电子兑换码
          <span>></span>
        </div>
      </div>
      <div class="my-order">
        <div id="font" class="iconfont icon-wodeyouhuijuan"></div>
        <div class="order">我的优惠券
          <span>></span>
        </div>
      </div>
      <div class="my-order">
        <div id="font" class="iconfont icon-boshimao"></div>
        <div class="order-end">我的拼团
          <span>></span>
        </div>
      </div>
    </div>
    <div class="Opinion">
        <div class="my-order">
        <div id="font" class="iconfont icon-gantan"></div>
        <div class="order">意见反馈
          <span>></span>
        </div>
      </div>
      <router-link to="/faq">
      <div class="my-order">
        <div id="font" class="iconfont icon-wenhao"></div>
        <div class="order">常见问题
          <span class="Question">遇到问题先来这里看看</span>
          <span>></span>
        </div>
      </div>
      </router-link>
      <router-link to="/set">
      <div class="my-order">
        <div id="font" class="iconfont icon-ziyuan"></div>
        <div class="order-set">设置
          <span>></span>
        </div>
      </div>
      </router-link>
    </div>
    <div class="bot">
              <p>www.imooc.com</p>
              <p>编织梦想 成就未来</p>
    </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .accout{
      width: 100%;
      height: 100%;
      background-color:#f3f4f6;

    }
    .shop{
      width: 3.45rem;
      height: 1.1rem;
      border-radius: 0.1rem;
      border: 1px solid #cccccc;
      margin: 0 auto;
      background-color: white;

    }
    .shop .s1{
      width: 3.45rem;
      height: 0.55rem;
      display: flex;

    }
    #icon{
      width: 0.45rem;
      height: 0.55rem;
      text-align: center;
      line-height:0.55rem ;
      font-size: 0.1rem;
    }
    .shopp{
      width: 2.85rem;
      height: 0.55rem;
      line-height: 0.55rem;
      font-size: 0.075rem;
      font-weight: bold;
      border-bottom: 1px solid gray;
      position: relative;
    }
    .shopp1{
      width: 2.85rem;
      height: 0.55rem;
      line-height: 0.55rem;
      font-size: 0.075rem;
      font-weight: bold;
      position: relative;
    }
    .shopp span{
      position: absolute;
      right: 0;
    }
    .shopp1 span{
      position: absolute;
      right: 0;
    }
    .shopp .good{
      padding: 0 0.3rem;
      font-size: 0.06rem;
      color: red;
    }
    .shopp1 .good{
      padding: 0 0.3rem;
      font-size: 0.06rem;
      color: red;
    }
    #my{
      width: 3.45rem;
      height: 2.75rem;
      margin: 0 auto;
      border: 1px solid #cccccc;
      background-color: white;

      border-radius: 0.1rem;
      margin-top: 0.18rem;
    }
  #my .my-order{
    width: 3.45rem;
    height: 0.55rem;
    display: flex;
  }
  #font{
      width: 0.45rem;
      height: 0.55rem;
      text-align: center;
      line-height:0.55rem ;
      font-size: 0.1rem;

    }
    .order{
      width: 2.85rem;
      height: 0.55rem;
      line-height: 0.55rem;
      font-size: 0.075rem;
      font-weight: bold;
      position: relative;
      border-bottom: 1px solid gray;

    }
    .order-end{
      width: 2.85rem;
      height: 0.55rem;
      line-height: 0.55rem;
      font-size: 0.075rem;
      font-weight: bold;
      position: relative;

    }
    .order span{
      position: absolute;
      right: 0;
    }
    .order-end span{
      position: absolute;
      right: 0;
    }
    .time{
      font-size: 0.0625rem;
      padding: 0 0.3rem;
      color: #d4d4d4;

    }
    .Opinion{
      width:3.45rem ;
      height: 1.65rem;
      border: 1px solid #cccccc;
      background-color: white;

      border-radius: 0.1rem;
      margin: 0 auto;
      margin-top: 0.18rem;
    }
     .Opinion .my-order{
    width: 3.45rem;
    height: 0.55rem;
    display: flex;
  }
    .bot{
      width:3.45rem ;
      margin: 0 auto;
      height: 1.7rem;
      margin-top: 0.35rem;
      /* background-color: plum; */
    }
    .bot p{
      text-align: center;
      font-size: 0.08rem;
      color: #d4d4d4;

    }
    .order-set{
        width: 2.85rem;
      height: 0.55rem;
      line-height: 0.55rem;
      font-size: 0.075rem;
      font-weight: bold;
      position: relative;
    }
    .order-set span{
      position: absolute;
      right: 0;
    }
    .Question{
      font-size: 0.0625rem;
      padding: 0 0.3rem;
      color: #d4d4d4;
    }

</style>